﻿<section class="section section-gallery" id="section-gallery">
    <header class="section-header row">
        <h1 class="section-title col-xs-24">
            <a href="#section-gallery">Section gallery</a>
        </h1>
    </header>

    <ul class="list-unstyled row">
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="http://lorempixel.com/800/400/nature" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
    </ul>

    <div class="row">
        <div class="col-xs-24">
            <p>This is a generic section of a gallery layout. The media containers have a bottom margin to nicely layout them.</p>

            {{#markdown}}
```xml
<section class="section section-gallery">
    <header class="section-header">
        <h1 class="section-title">Section gallery</h1>
    </header>

    <ul class="list-unstyled row">
        <!-- Repeated element -->
        <li class="col-md-6">
            <figure class="media">
                <div class="media-img ratio-2-1">
                    <a href="#">
                        <img src="#" alt="" />
                    </a>
                </div>

                <figcaption class="media-caption">
                    <h4 class="media-header">
                        <a href="#">Header</a>
                    </h4>
                    <div class="media-subheader">
                        <a href="#">Subheader</a>
                    </div>
                </figcaption>
            </figure>
        </li>
    </ul>
</section>
```
            {{/markdown}}
        </div>
    </div>
</section>
